<template>
  <el-container >
    <el-header>
      <el-menu
          :default-active="path"
          router
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
          style="position: relative;"
          default-active='/main'>
        <el-menu-item index="/main">首页</el-menu-item>
        <el-menu-item index="/introduction">师资</el-menu-item>
        <el-menu-item index="/empty">走进学园</el-menu-item>
        <el-menu-item index="/face" v-show="this.role === '学生'">人脸识别</el-menu-item>
        <el-menu-item index="/teacher" v-show="this.role === '学生'">教师列表</el-menu-item>
        <el-menu-item style="display: block; position: absolute; right: 0">
          <Undown/>
        </el-menu-item>
      </el-menu>
    </el-header>

    <el-main>
      <router-view/>
    </el-main>

    <el-footer>
      <Foot/>
    </el-footer>

  </el-container>
</template>

<style>

</style>


<script>
import {defineComponent} from 'vue';
import Family from "@/components/Family";
import Main from "@/components/Main";
import Foot from "@/components/Foot";
import Undown from "@/components/Undown";

export default defineComponent({
  name: 'Home',
  components: {
    Undown,
    Foot,
    Main,
    Family,
  },
  data() {
    return {
      path: this.$route.path,
      head: false
    }
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("1")) !== null){
      this.head = true
    }
    this.role = sessionStorage.getItem("2")
  }
})
</script>